<template>
	<view>
		<div class="header">
			<uni-card :border='false' style="position: absolute; top: 20px; width: 100%; " padding='0' spacing='0'
				margin='10'>
				<div style="display: flex; justify-content: space-between; padding: 0 10px;">
					<div>
						<uni-file-picker @select="select" limit="1" :del-icon="false"
							disable-preview file-extname="png,jpg" :imageStyles="imageStyles" file-mediatype="image">
							<img :src="userInfo.headImageSrc !== null ? imgBaseUrl + userInfo.headImageSrc : defaultAvatarImg"
								alt="头像" style="width: 100%; height: 110px;">
						</uni-file-picker>
					</div>
					<div style="text-align: left; margin-left: 10px; flex: 5; padding-top: 10px;">
						<div><span style="font-weight: bolder;">昵称：{{userInfo.nickname}}</span></div>
						<div><span style="font-size: 10px;">帐号：{{userInfo.phoneNumber}}</span></div>
						<div><span style="font-size: 10px;">所在高校：{{userInfo.university}}</span></div>
						<div><span style="font-size: 10px;">用户类型：{{userInfo.userType === '0' ? '普通用户' : '管理员'}}</span>
						</div>
					</div>
				</div>
			</uni-card>
		</div>

		<div style="position: relative; top: 70px;">
			<uni-card :border='false' padding='0' spacing='0' margin='10'>
				<uni-list-item v-for="(list, index) in listItem" v-if="list.type <= userInfo.userType" :key="index"
					showArrow :title="list.title" clickable @click="onClick(list.id)" />
				<uni-list-item showArrow title="退出登入" clickable @click="open" />
			</uni-card>
		</div>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="warn" message="成功消息" :duration="2000" :before-close="true" @close="isClose"
				@confirm="confirm">是否确定退出登入！</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import request from '../../network/request.js'
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import baseUrl from '../../publicData/baseUrl.js'
	export default {

		computed: {
			...mapState('userModule', ['userInfo'])
		},

		data() {
			return {
				// 图片 host
				listItem: [{
						id: 1,
						type: "0",
						title: '个人信息'
					},
					{
						id: 2,
						type: "1",
						title: '用户权限管理'
					},
					{
						id: 3,
						type: "1",
						title: '用户账户管理'
					},
					{
						id: 4,
						type: "0",
						title: '上传管理'
					},
					{
						id: 5,
						type: "0",
						title: '修改密码'
					},
				],
				imgBaseUrl: baseUrl.imgBaseUrl,
				imageStyles: {
					width: 120,
					height: 120,
					border: {
						radius: '50%'
					}
				},

				// 图片  显示隐藏是否登入
				// flag: true,

				// 未上传头像的默认头像图片地址 
				defaultAvatarImg: '',
			}
		},

		onLoad() {

			// 当用户为上传头像，为其设置默认头像
			if (this.userInfo.headImageSrc === null) {
				this.userInfo.sex === '男' ? this.defaultAvatarImg = '../../static/defaultAvatarImg/nansheng.png' : this
					.defaultAvatarImg = '../../static/defaultAvatarImg/nvsheng.png'
			} else {

			}
		},

		methods: {
			
			...mapActions('userModule', ["updateHeadImg"]),
			...mapMutations('publicModule', ["removeToken"]),

			// 去向登入页面
			goToLogin() {
				uni.navigateTo({
					url: '../../packagesCenter/myLogin',
				})
			},

			// 选择文件,并上传到服务器【有一个问题解决，tempFilePaths 会乱码】
			select(e) {
				const that = this
				uni.getStorage({
					key: "token",
					success(res) {
						uni.uploadFile({
							url: baseUrl.host + '/uploadHeadImg', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'multipart/form-data',
								'Authorization': 'Bearer ' + res.data,
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								// 将路径添加到数据库
								if(data.status >= 200 && data.status < 300){
									uni.getStorage({
										key: 'token',
										success(res) {
											that.updateHeadImg({
												headImageSrc: data.filePath, 
												id: that.userInfo.id, 
												token: res.data
											})
										}
									})
								}
							}
						});
					}
				})
			},

			// 去向功能列表详情页面
			onClick(id) {
				if (id === 1) {
					uni.navigateTo({
						url: '../../packagesCenter/myInfo?myInfo=' + JSON.stringify(this.userInfo)
					})
					return
				}

				// 用户权限管理
				if (id === 2) {
					uni.navigateTo({
						url: '../../packagesCenter/userRightsManagement'
					})
					return
				}

				// 用户账户管理
				if (id === 3) {
					uni.navigateTo({
						url: '../../packagesCenter/userAccountManagement'
					})
					return
				}

				// 上传管理
				if (id === 4) {
					uni.navigateTo({
						url: '../../packagesCenter/uploadManagement'
					})
					return
				}

				// 修改密码
				if (id === 5) {
					uni.navigateTo({
						url: '../../packagesCenter/modifyPassword'
					})
					return
				}
			},

			// 打开是否退出登入窗口
			open() {
				this.$refs.popup.open()
			},

			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			isClose() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},

			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm() {
				this.removeToken()
				uni.reLaunch({
					url: '../../pages/login/myLogin'
				})
			}
		},
	}
</script>
<style lang="scss">
	.header {
		width: 100%;
		height: 80px;
		background-color: #E7536E;
		position: relative;
	}
</style>